import React from 'react'
import { 
  NavLink, 
  useRoutes,
 } from 'react-router-dom'
import routesArr from './routes'
import "./App.css"

export default function App() {
  const elementSheet = useRoutes(routesArr)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由连接 */}
            <NavLink 
              className='list-group-item'
              to="/about">
                About
            </NavLink>
            {/** end属性 这里是子集如果高亮, 此处高亮就会终止 */}
            <NavLink 
              className='list-group-item'
              end 
            to="/home">
              Home
              </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由, 直接使用路由表 */}
              {elementSheet}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

